<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-18 23:57:11
 * @LastEditTime: 2024-06-20 20:26:13
-->
<script lang="ts" setup>
import { props } from "./props";
import Avatar from "./avatar.vue";
const { placement, shape, src, name, size } = defineProps(props);
</script>
<template>
  <el-popover placement="bottom" :width="200" trigger="hover">
    <template #reference>
      <Avatar
        :name="name"
        :src="src"
        :shape="shape"
        :placement="placement"
        :size="size"
      />
    </template>
    <div class="content">
      <Avatar
        :name="name"
        :src="src"
        :shape="shape"
        placement="bottom"
        :size="size"
      />
      <slot />
    </div>
  </el-popover>
</template>
<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: center;
  flex-direction: column
}
</style>
